all files / dialog/ dialog.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
 
import Popup from '../internal/popup'
export default {
  mixins: [Popup],
  name: 'mu-dialog',
  props: {
    dialogClass: {
      type: [String, Array, Object]
    },
    title: {
      type: String
    },
    scrollable: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    bodyStyle () {
      return {
        'overflow-x': 'hidden',
        'overflow-y': this.scrollable ? 'auto' : 'hidden',
        '-webkit-overflow-scrolling': 'touch',
        'max-height': this.scrollable ? this.maxDialogContentHeight + 'px' : 'none'
      }
    },
    showFooter () {
      return this.$slots && this.$slots.actions && this.$slots.actions.length > 0
    }
  },
  data () {
    return {
      maxDialogContentHeight: null
    }
  },
  mounted () {
    this.setMaxDialogContentHeight()
  },
  updated () {
    setTimeout(() => {
      this.setMaxDialogContentHeight()
    }, 0)
  },
  methods: {
    setMaxDialogContentHeight () {
      let maxDialogContentHeight = window.innerHeight - 2 * 64
      if (this.$refs.footer) maxDialogContentHeight -= this.$refs.footer.offsetHeight
      if (this.title) maxDialogContentHeight -= this.$refs.title.offsetHeight
      this.maxDialogContentHeight = maxDialogContentHeight
    },
    overlayClick () {
      this.$emit('close', 'overlay')
    },
    escPress () {
      this.$emit('close', 'esc')
    },
    show () {
      this.$emit('show')
    },
    hide () {
      this.$emit('hide')
    }
  }
}